<template>
	<div id="realName">
		<!--<div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台</div>-->
		<!--&lt;!&ndash;实线&ndash;&gt;-->
		<!--<div class="solid"></div>-->
    <div class="flex_head">
      <div class="solid"></div>
      <div class="item_two">
        <h3>实名认证</h3>
      </div>
    </div>
    <div class="infoHead flex">
      <div class="item item1"></div>
      <div class="item item2">
        <div class="line" style="font-weight: bold">为什么要进行实名认证？</div>
        <div class="line">设置实名认证环节，可以有效保证身份的真实可靠，同时也可提高帐户资金安全，提高交易平台的信誉度，让您的交易更安全省心！</div>
      </div>

    </div>
		<div class="main">

			<el-form :label-position="labelPosition" label-width="90px" :model="formLabelAlign" class="form">
			<el-form-item label="姓名：">
				<el-input v-model="formLabelAlign.name" placeholder="请输入姓名" :readonly="isAditor"></el-input>
			</el-form-item>
			<el-form-item label="身份证号：">
				<el-input v-model="formLabelAlign.idCard" placeholder="请输入身份证号" :readonly="isAditor"></el-input>
			</el-form-item>
			<el-form-item label="手机号：">
				<el-input v-model="formLabelAlign.phone" placeholder="请输入手机号" :readonly="isAditor"></el-input>
			</el-form-item>
			<div><el-button type='primary' :disabled="loading1" @click="checkStatus" v-text="text"></el-button></div>
			</el-form>
      <!--<h3 v-if="isSuccess2 == 9">您已经实名认证成功</h3>-->
      <!--<h3 v-if="isSuccess2 == 10">实名认证失败，请重新提交</h3>-->
      <!--<h3 v-if="isSuccess2 == 11">正在审核中......</h3>-->
		</div>
	</div>
</template>

<script>
	export default{
		data (){
			return{
				labelPosition: 'right',
				formLabelAlign: {
					name: '',
					idCard: '',
					phone: ''
				},
				loading1:false,
				text:'提交审核',
        isAditor:false,
        isSuccess2:''
			}
		},
		created(){
          this.checkStausTwo();
		},
		methods:{
		  checkStausTwo(){
        this.$api.checkStatus().then(res =>{
          if(res.code == '000000'){
            console.log(res.data);
            if(res.data){
              this.formLabelAlign = res.data;
              let mid =res.data.status;
              if(mid == '9'){
                this.isAditor= true;
                this.text = '审核通过';
                this.loading1 = true;
              }
              if(mid == '10'){
                this.loading1 = false;
                this.text = '提交审核';
                this.isAditor= false;
              }
              if(mid == '11'){
                this.loading1 = true;
                this.isAditor= true;
                this.text = '审核中...';
              }
            }

          }
        })
      },
			checkStatus(){
				var pattern = /\d{17}[\d|x]|\d{15}/;
				var pattern2 = /0?(13|14|15|18|17)[0-9]{9}/;
				if(this.formLabelAlign.name== ''){
					this.$message({
						type:"info",
						message:"请输入姓名"
					})
				}else if(!pattern.test(this.formLabelAlign.idCard)){
					this.$message({
						type:"info",
						message:"您输入的身份证号格式不正确！"
					})

				}else if(this.formLabelAlign.phone == ''){
					this.$message({
						type:"info",
						message:"请输入手机号！"
					})
				}else if(!pattern2.test(this.formLabelAlign.phone)){
                    this.$message({
						type:"info",
						message:"您输入的手机号格式不正确！"
					})
				}else{

				  this.$api.postRealName(this.formLabelAlign).then(res =>{

            if(res.code == '000000'){
				      console.log(res.data);
              this.text = '审核中';
              this.loading1 = true;
              this.isAditor= true;

              this.$message({
                type:'success',
                message:'实名认证成功'
              })
            }
          })


				}

			}
		}
	}
</script>

<style lang="less">
	#realName{
		.icon-icon1 {
    font-size: 35px!important;
    margin-right: 35px;
    position: absolute;
    color: #008000;
    right: 100px;
    bottom: -8px;
}
		.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.icon-icon1{
			font-size: 25px;
		}

		.main{

			h3{
				text-align:left;
				padding: 10px 30px;
			}
			.form{
				width: 400px;
				margin: 15px;
			}
		}
    .infoHead{
      height: 90px;
      .item1{
        width: 3px;
        height: 100%;
        background-color: #ffbd30;
      }
      .item2{
        flex: 1;
        background-color: #fffde6;
      }
      .line{
        padding-left: 50px;
        line-height: 45px;
        text-align: left;
        font-size: 15px;
      }

    }
	}
</style>
